<template>
  <el-dialog
    :close-on-click-modal="false"
    :model-value="api.createState.visible"
    :title="api.createState.title"
    destroy-on-close
    @close="api.onCloseCreate()"
  >
    <el-form
      ref="formRef"
      :model="api.createState.form"
      :rules="rules"
      label-width="120px"
      status-icon
      class="article-create"
    >
      <el-form-item
        label="名称"
        prop="name"
      >
        <el-input
          v-model="api.createState.form.name"
          clearable
          placeholder="名称"
        />
      </el-form-item>

      <el-form-item
        label="颜色"
        prop="color"
      >
        <el-color-picker v-model="api.createState.form.color" show-alpha :predefine="predefineColors" />
      </el-form-item>


      <el-form-item class="mb-0">
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="api.onCloseCreate()">关闭</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ArticleApi, ArticleTypeApi } from "~/api/system/article/article.api";
import { FormRules } from "element-plus";
import { ImageApi } from "~/api/system/file/image.api";

interface Props {
  api: ArticleTypeApi;
}

const { api } = withDefaults(defineProps<Props>(), {});
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
const formRef = ref();
const rules = reactive<FormRules>({});
const imageApi = new ImageApi();

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.createState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseCreate();
      }
    });
  }
}


</script>

<style lang="scss" scoped>

</style>
